<template>
  <div>
    <Table :columns="columns" :data-source="dataSources" :pagination="page">
      <template slot="action" slot-scope="text, record">
        <router-link :to="{ path: `/detail/${record.key}` }">check</router-link>
      </template>
    </Table>
  </div>
</template>

<script>
import { Table } from "ant-design-vue";

export default {
  name: "TablePage",
  components: {
    Table,
  },
  data() {
    return {
      page: {
        defaultCurrent: Number(this.$route.query.current || 1),
        onChange: this.changeURLWithQuery,
      },
      dataSources: [],
      columns: [
        {
          dataIndex: "key",
          title: "Key",
        },
        {
          dataIndex: "value",
          title: "Value",
        },
        {
          title: "Action",
          scopedSlots: { customRender: "action" },
        },
      ],
    };
  },
  created() {
    this.assignDataSources();
  },
  methods: {
    assignDataSources() {
      let index = 0;
      const sources = [];
      while (index != 50) {
        sources.push({ key: index, value: index + "a" });
        index++;
      }
      this.dataSources = sources;
    },
    changeURLWithQuery(pagination) {
      this.$router.replace({
        query: {
          current: pagination,
        },
      });
    },
  },
};
</script>
